<template>
  <div>
    <el-checkbox
      class="checkbox-group-total"
      :indeterminate="isAllIndeterminate"
      @change="allChange"
    >{{totalData.name}}</el-checkbox>
    <wl-checkbox
      v-for="(item,index) in totalData.child_list"
      :isAll="isAll"
      :key="item.id"
      :totalData="getData"
      :field="setFiled(index)"
      :allData="allData"
      :rawData="item"
    ></wl-checkbox>
  </div>
</template>
<script>
export default {
  props: {
    totalData: Object | Array,
    rawData: Object | Array,
    allData: Array,
    field: Number
  },

  data() {
    return {
      isAllIndeterminate: true,
      isAll: false,
      item: []
    };
  },
  methods: {
    allChange(flag) {
      this.isAll = flag;
      this.isAllIndeterminate = false;
    },
    setFiled(itemFiled) {
      return this.field.toString() + itemFiled.toString();
    },
    setData(val) {
      for (var i = 0; i < val.length; i++) {
        if (isNoEmpty(val[i].child_list)) {
          this.setData(val[i].child_list);
        } else {
          var selectData = this.rawData;
          for (var k = 0; k < selectData.length; k++) {
            if (val[i].id == selectData[k]) {
              this.item.push(selectData[k]);
            }
          }
        }
      }
    }
  },
  computed: {
    getData() {
      this.setData(this.totalData.child_list);
      return this.item;
    }
  },
  mounted() {}
};
</script>
<style scoped>
.checkbox-group-total {
  margin: 5px 0;
  width: 100%;
  background-color: rgba(204, 235, 248, 1);
  color: #006699;
  padding: 3px 0;
}
</style>

